<template>


  <el-menu
      background-color="whitesmoke"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <div    @click="goToIndex">
      <p style="font-size: 20px;margin: 15px 0 0 50px; pointer-events: none;" >
        篝火</p>
    </div>
      <div index="5" style="font-size: 20px; color: dodgerblue;margin: 15px 0 0 30px">创作者中心</div>
    <div class="flex-grow" />
    <el-menu-item index="1" color="#edd3a7">
      <el-icon  color="#bbab40" size="50"><UserFilled /></el-icon>
      会员</el-menu-item>
    <el-menu-item>
      <el-icon  size="50"><Bell /></el-icon>
    </el-menu-item>
    <el-popover v-if="user!=null"
                placement="bottom"
                title="欢迎来到篝火聚集地"
                :width="200" trigger="hover"
    >
      <template #reference>
        <div style="margin-top: 10px">
          <el-avatar :src="user.avatar"></el-avatar>
        </div>
      </template>
      <div style="text-align: center">
        <el-button size="small" type="info" @click="router.push('/manage')">修改资料</el-button>
        <br>
        <el-button size="small" type="info" @click="router.push('/personal')">我的主页</el-button>
        <br>
        <el-button size="small" type="warning" @click="logout()">退出登录</el-button>
        <el-button v-if="user.isAdmin==1"
                   size="small" type="danger" @click="router.push('/admin')">后台管理页面
        </el-button>
      </div>
    </el-popover>

  </el-menu>

<div  style="width: 1200px;margin: 0 auto" >
    <el-container>
  <div style="height: 100vh; width: 260px;margin:20px auto">
      <el-aside width="260px">
        <el-menu router style="width: 260px">
          <router-link to="/text">
          <el-button-group >
            <el-button style="width: 260px;margin-top: 10px;height: 45px" type="primary" :icon="ArrowLeft"
                      >写文章</el-button>
          </el-button-group>
          </router-link>
          <el-menu-item index="/creation/home">
            <el-icon><HomeFilled /></el-icon>首页
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><CopyDocument /></el-icon>
              <span>内容管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/creation/banner">文章管理</el-menu-item>
              <el-menu-item index="/creation/data">草稿管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Platform /></el-icon>
              <span>数据中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/creation/ContentData">内容数据</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><QuestionFilled /></el-icon>
              <span>帮助中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/creation/cjwenti">常见问题</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
  </div>
      <el-main >
        <router-view/>
      </el-main>
    </el-container>
</div>
</template>

<script setup >

import router from "@/router";
import {ref} from "vue";
const user = ref(getUser());
const publish =()=>{
  router.push('/reg');
}
const goToIndex=()=>{
  router.push('/index/following');
}

</script>

<style scoped>

.flex-grow {
  flex-grow: 2;
}

</style>